<template>
  <div class="sign">
    <div class="title">平时考核系统民主测评会</div>
    <div class="desc">会议签到</div>
    <div class="form">
      <van-form>
        <div class="form_list">
          <van-field
            v-model="form.telephone"
            type="tel"
            name="telephone"
            placeholder="请输入手机号"
            maxlength="11"
            :rules="[{ required: true, message: '' }]">
            <template #left-icon>
              <i class="iconfont icon-shouji"></i>
            </template>
          </van-field>
        </div>
        <div class="form_list">
          <van-field
            v-model="form.code"
            type="digit"
            name="code"
            placeholder="请输入验证码"
            maxlength="6"
            :rules="[{ required: true, message: '' }]">
            <template #left-icon>
              <i class="iconfont icon-anquan"></i>
            </template>
            <template #button>
              <div class="button" @click="getPhoneCode">{{ codeWords }}</div>
            </template>
          </van-field>
        </div>
        <div class="commit">
          <!-- <div class="button" @click="goSign">签到</div> -->
          <van-button
            round
            type="primary"
            color="#1989fa"
            @click="goSign"
            :loading="loading"
            :disabled="loading"
            loading-text="提交中...">
            签到
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { sendSignCode, signThrough, sign } from '@api/api-democratic.js'
import { phoneReg } from '@common/regExps.js'

export default {
  name: 'sign',
  components: {},
  props: {},
  data() {
    return {
      telephone: '',
      verifyCode: '',
      codeWords: '获取验证码',
      getCodeFlag: false,
      id: this.$route.query.assessmentId,
      randomCode: this.$route.query.randomCode,
      getPhoneCodeFlag: true,
      form: {
        assessmentId: this.$route.query.assessmentId,
        code: '',
        telephone: '',
        uuid: '677bfad2-d487-474b-8852-3e1e7db195c6',
      },
      loading: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.signIsEffective()
  },
  mounted() {},
  methods: {
    // 获取手机验证码
    signIsEffective() {
      signThrough(`/${this.randomCode}/${this.id}`)
        .then(res => {
          if (res.data) {
            this.form.uuid = res.data
          } else {
            this.$router.push(`/signSceneEd?msg=${encodeURIComponent(res.message)}`)
          }
        })
        .catch(err => {})
    },
    // 获取手机验证码
    getPhoneCode() {
      this.getCodeFlag = true
      if (this.form.telephone && this.getPhoneCodeFlag) {
        this.getPhoneCodeFlag = false
      } else {
        if (!this.form.telephone) {
          this.$toast.fail({
            // duration: 5000, // 持续展示 toast
            closeOnClick: true,
            message: '请输入有效的手机号',
          })
          return false
        } else if (!phoneReg.test(this.form.telephone)) {
          this.$toast.fail({
            // duration: 5000, // 持续展示 toast
            closeOnClick: true,
            message: '请输入有效的手机号',
          })
          return false
        }
        if (!this.getPhoneCodeFlag) {
          this.$toast.fail({
            // duration: 5000, // 持续展示 toast
            closeOnClick: true,
            message: '短信发送频率过高，请稍后再试!',
          })
          return false
        }
      }
      this.wateTimeFun()
      sendSignCode({
        assessmentId: this.form.assessmentId,
        telephone: this.form.telephone,
      })
        .then(res => {
          const data = res.data
          if (res.message) {
            // this.$toast.fail({
            //   duration: 5000, // 持续展示 toast
            //   closeOnClick: true,
            //   message: res.message,
            // });
            this.$dialog.alert({
              message: res.message,
              closeOnClickOverlay: true,
            })
            this.getPhoneCodeFlag = true
            this.codeWords = '发送验证码'
            clearInterval(this.wateTime)
          } else {
            this.$toast('获取成功')
          }
        })
        .catch(err => {
          this.getPhoneCodeFlag = true
          this.codeWords = '发送验证码'
          clearInterval(this.wateTime)
        })
    },
    // code倒计时
    wateTimeFun() {
      var seconds = 60
      this.wateTime = setInterval(() => {
        if (seconds > 0) {
          seconds--
          this.codeWords = seconds + 's'
        } else {
          this.getPhoneCodeFlag = true
          this.codeWords = '发送验证码'
          clearInterval(this.wateTime)
        }
      }, 1000)
    },
    goSign() {
      if (!this.form.telephone) {
        // this.$toast("请输入有效的手机号");
        this.$toast.fail({
          // duration: 5000, // 持续展示 toast
          closeOnClick: true,
          message: '请输入有效的手机号',
        })
        return false
      }
      if (!this.form.code) {
        this.$toast.fail({
          // duration: 5000, // 持续展示 toast
          closeOnClick: true,
          message: '请输入验证码',
        })
        return false
      }
      // this.$router.push("/resultPage");
      this.loading = true
      sign({
        ...this.form,
      })
        .then(res => {
          this.loading = false
          if (res.message) {
            this.$dialog.alert({
              message: res.message,
              closeOnClickOverlay: true,
            })
            // this.$toast.fail({
            //   duration: 5000, // 持续展示 toast
            //   closeOnClick: true,
            //   message: res.message,
            // });
          } else {
            this.$router.push(`/resultPage?signTme=${res.data}&msg=${encodeURIComponent('签到成功')}`)
          }
        })
        .catch(err => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.sign {
  text-align: center;
  padding: 0 16px;
  font-size: 12px;
  .title {
    font-size: 16px;
    color: #333333;
    margin-top: 75px;
  }
  .desc {
    font-size: 14px;
    margin-top: 25px;
    font-weight: bold;
  }
  .form {
    margin: 75px auto;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    /deep/ .van-form {
      width: 100%;
      .form_list {
        line-height: 20px;
        width: 100%;
        border-bottom: 1px solid #dddddd;
        margin-bottom: 12px;
        padding: 0 10px 12px;
        .van-cell {
          height: 100%;
          font-size: 16px;
          background-color: transparent;
          display: flex;
          align-items: center;
          .van-field__control {
            padding-left: 10px;
            background-color: transparent !important;
          }
          .van-field__label {
            width: 50px;
            margin-right: 0;
          }
        }
        .button {
          font-size: 12px;
          background-color: #1989fa;
          color: #fff;
          border-radius: 2px;
          width: 80px;
          text-align: center;
        }
        .iconfont {
          font-size: 16px;
        }
      }
    }
    .commit {
      margin-top: 100px;
      .van-button {
        width: 50%;
      }
      .button {
        background-color: #1989fa;
        color: #fff;
        font-size: 16px;
        height: 40px;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        font-weight: 700;
        width: 50%;
        margin: auto;
      }
    }
  }
}
</style>
